<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>首页三</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="__static/lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="__static/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="__static/css/public.css" media="all">
    <style>
        .top-panel {
            border: 1px solid #eceff9;
            border-radius: 5px;
            text-align: center;
        }
        .top-panel > .layui-card-body{
            height: 60px;
        }
        .top-panel-number{
            line-height:60px;
            font-size: 30px;
            border-right:1px solid #eceff9;
        }
        .top-panel-tips{
            line-height:30px;
            font-size: 12px
        }
    </style>
</head>
<body>
<!--<div class="layuimini-container">-->
<div class="layuimini-main">

    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-md3">
            <div class="layui-card top-panel">
                <div class="layui-card-header" style="text-align: left;">客户打款(元)
                	<span style="margin-top: 3%;" class="layui-badge layui-bg-blue  pull-right">月</span>
                </div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs9 layui-col-md9 top-panel-number">
                            {$info.amount}
                        </div>
                        <div class="layui-col-xs3 layui-col-md3 top-panel-tips">
                           	 今天 <br><a style="color: #1aa094">▲{$info.today_amount}</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-md3">
            <div class="layui-card top-panel">
                <div class="layui-card-header" style="text-align: left;">客户退款(元)
                	<span style="margin-top: 3%;" class="layui-badge layui-bg-blue  pull-right">月</span>
                </div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs9 layui-col-md9 top-panel-number">
                            {$info.return_amount}
                        </div>
                        <div class="layui-col-xs3 layui-col-md3 top-panel-tips">
                           	 今天 <br><a style="color: #1aa094">▲{$info.today_return_amount}</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-md3">
            <div class="layui-card top-panel">
                <div class="layui-card-header" style="text-align: left;">账户充值(币)
                	<span style="margin-top: 3%;" class="layui-badge layui-bg-blue  pull-right">月</span>
                </div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs9 layui-col-md9 top-panel-number">
                            {$info.currency}
                        </div>
                        <div class="layui-col-xs3 layui-col-md3 top-panel-tips">
                           	 今天 <br><a style="color: #1aa094">▲{$info.today_currency}</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-md3">
            <div class="layui-card top-panel">
                <div class="layui-card-header" style="text-align: left;">账户退款(币)
                	<span style="margin-top: 3%;" class="layui-badge layui-bg-blue  pull-right">月</span>
                </div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs9 layui-col-md9 top-panel-number">
                            {$info.return_currency}
                        </div>
                        <div class="layui-col-xs3 layui-col-md3 top-panel-tips">
                           	 今天 <br><a style="color: #1aa094">▲{$info.today_return_currency}</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-md3">
            <div class="layui-card top-panel">
                <div class="layui-card-header" style="text-align: left;">账户消耗(币)
                	<span style="margin-top: 3%;" class="layui-badge layui-bg-blue  pull-right">月</span>
                </div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs9 layui-col-md9 top-panel-number">
                            {$info.consume}
                        </div>
                        <div class="layui-col-xs3 layui-col-md3 top-panel-tips">
                           	 今天 <br><a style="color: #1aa094">▲{$info.today_consume}</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="layui-col-xs12 layui-col-md3">
            <div class="layui-card top-panel">
                <div class="layui-card-header" style="text-align: left;">客户数量(个)
                	<span style="margin-top: 3%;" class="layui-badge layui-bg-blue  pull-right">总</span>
                </div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs9 layui-col-md9 top-panel-number">
                            {$info.customer}
                        </div>
                        <div class="layui-col-xs3 layui-col-md3 top-panel-tips">
                           	 今天 <a style="color: #1aa094">▲{$info.today_customer}</a><br/>
                           	 当前月<a style="color: #1aa094">▲{$info.month_customer}</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- <div class="layui-col-xs12 layui-col-md3">
            <div class="layui-card top-panel">
                <div class="layui-card-header">要展示的指标名称</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs9 layui-col-md9 top-panel-number">
                            9,054,056
                        </div>
                        <div class="layui-col-xs3 layui-col-md3 top-panel-tips">
                            比昨天 <a style="color: #1aa094">▲0.12</a><br>
                            比七日 <a style="color: #bd3004">▼0.06</a>
                        </div>
                    </div>
                </div>
            </div>

        </div> -->
         
    </div>

    <div class="layui-row layui-col-space15 ">
        <div class="layui-col-xs12 layui-col-md9">
        	<div class="layui-card-header " style="background-color:#ffffff;">
        		总消耗
        		<div class="pull-right">
                    <div class="btn-group">
                        <div class="layui-btn-group">
						  <button type="button" class="layui-btn layui-btn-sm layui-btn-primary month" > 月 </button>
						  <button type="button" class="layui-btn layui-btn-sm layui-btn-primary day"> 日 </button>
						</div>
                    </div>
                </div>
        	</div>
            <div id="echarts-records" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
        </div>    
        <div class="layui-col-xs12 layui-col-md3">
        	<div class="layui-card-header" style="background-color:#ffffff;">开户进度</div>
            <div id="echarts-pies" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
        </div>
    </div>


    <div class="layui-row ">
        <div class="layui-col-xs12 layui-col-md12">
            <div class="layui-card-header " style="background-color:#ffffff;">
            	个人消耗排行榜
        		<div class="pull-right">
                    <div class="btn-group">
                   	 	<div class="layui-inline">
                    	 	<input type="text" class="layui-input" autocomplete="off" id="test1" placeholder="请选择日期">
                   	 	</div>
                        <div class="layui-btn-group">
                        	<button type="button" class="layui-btn layui-btn-sm layui-btn-primary " onclick="get_consume_top(3)"> 上月 </button>
						  	<button type="button" class="layui-btn layui-btn-sm layui-btn-primary " onclick="get_consume_top(2)"> 上周 </button>
						  	<button type="button" class="layui-btn layui-btn-sm layui-btn-primary" onclick="get_consume_top(1)"> 昨日 </button>
						</div>
                    </div>
                </div>
        	</div>
            <div id="echarts-xiaohao" style="background-color:#ffffff;min-height:300px;padding: 10px"></div>
        </div>
       
    </div>
	<div class="layui-row layui-col-space15">
        <div class="layui-col-xs6 layui-col-md6">
            <div class="layui-card-header " style="background-color:#ffffff;">
            	第三方，每月点击数
        		<div class="pull-right">
                    <div class="btn-group">
                   	 	<div class="layui-inline">
                    	 	<input type="text" class="layui-input" autocomplete="off" id="test2" placeholder="请选择日期">
                   	 	</div>
                    </div>
                </div>
        	</div>
            <div id="echarts-total-clicks" style="background-color:#ffffff;min-height:300px;padding: 10px"></div>
        </div>
        <div class="layui-col-xs6 layui-col-md6">
            <div id="echarts-map" style="background-color:#ffffff;min-height:300px;padding: 10px"></div>
        </div>
    </div>
    <!-- 
    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-md6">
            <div id="echarts-map" style="background-color:#ffffff;min-height:300px;padding: 10px"></div>
        </div>
        <div class="layui-col-xs12 layui-col-md6">
            <div id="echarts-map" style="background-color:#ffffff;min-height:300px;padding: 10px"></div>
        </div>
    </div>
     -->

</div>
<!--</div>-->
<script src="__static/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="__static/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
	var $,layer,echarts,echarts_consume_top ,option_consume_top;
    layui.use(['layer', 'echarts','laydate'], function () {
        $ = layui.jquery, layer = layui.layer, echarts = layui.echarts,laydate = layui.laydate;
        //日期范围
        laydate.render({
            elem: '#test1'
            ,range: '&'
       	    ,done: function(value, date, endDate){
       		 	get_consume_top(4,value);
       		}
        });
        laydate.render({
            elem: '#test2'
            ,range: '&'
       	    ,done: function(value){
                get_clicks(value);
       		}
        });
        /**
         * 报表功能
         */
        var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');

        var optionRecords = {
            title: {
                //text: '指标名称-报表图'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                data: ['消耗']
            },
            
            toolbox: {
                feature: {
                    saveAsImage: {show: true},
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
           
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: []
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '消耗',
                    type: 'line',
                    stack: '总量',
                    areaStyle: {},
                    data: []
                }
            ]
        };
        echartsRecords.setOption(optionRecords);
        $(".day").click(function(){
        	get_consume(3);
        	
        });
        $(".month").click(function(){
        	get_consume(2);
        });
        
        get_consume(3)
		function get_consume(tt){
        	echartsRecords.showLoading();
        	$.post('{:url("get_consume_info")}?t=json',{time:tt},function(data){
        		echartsRecords.hideLoading();
        		echartsRecords.setOption({
        			title: {
                        text: data.data.text
                    },
        			 xAxis: [
   		                {
   		                    type: 'category',
  		                    boundaryGap: false,
   		                    data: data.data.x,
   		                    boundaryGap: true
    		        	}
    		        ],
    		        series: [{
    		        	name: '消耗',
    		            data: data.data.y
    		        }]
    		    });
        	});
        	
		}

        /**
         * 玫瑰图表
         */
        var echartsPies = echarts.init(document.getElementById('echarts-pies'), 'walden');
        var optionPies = {
            title: {
                text: '开户进度',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['开户中', '过素材（阶段一）', '过素材（阶段二）', '备户完成','投递中','禁用账户']
            }, 
            
            series: [
                {
                    name: '账户进度',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    roseType: 'area',
                    data:[],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ] 
        };
        echartsPies.setOption(optionPies);
        get_optionPies_info();
        function get_optionPies_info(){
        	echartsPies.showLoading();
        	$a = ['开户中', '过素材（阶段一）', '过素材（阶段二）', '备户完成','投递中','禁用账户'];
        	$.post('{:url("account_jindu")}?t=json',{},function(data){
        		var rs = [];
        		var n = 0;
                for(var res in data.data){
                	n = n + data.data[res]*1;
                    rs.push({
                        name :$a[res],
                        value:data.data[res]
                    });
                }
        		echartsPies.hideLoading();
        		
        		echartsPies.setOption({
        			title: {
                        text: '账户总数:'+n,
                        left: 'center'
                    },
    		        series: [{
    		            data: rs
    		        }]
    		    });
        	});
        	
        } 
      	


        /**
         * 柱状图
         */
        echarts_consume_top = echarts.init(document.getElementById('echarts-xiaohao'), 'walden');
        option_consume_top = {
       		 	color: ['#3398DB'],
       		    tooltip: {
       		        trigger: 'axis',
       		        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
       		            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
       		        }
       		    },
       		    grid: {
       		        left: '3%',
       		        right: '4%',
       		        bottom: '3%',
       		        containLabel: true
       		    },
       		    xAxis: [
       		        {
       		            type: 'category',
       		            data: [],
       		            axisTick: {
       		                alignWithLabel: true
       		            }
   						
       		        }
       		    ],
       		    yAxis: [
       		        {
       		            type: 'value'
       		        }
       		    ],
       		    series: [
       		        {
       		            type: 'bar',
       		            barWidth: '60%',
       		            data: []
       		        }
       		    ]
        };

        echarts_consume_top.setOption(option_consume_top);
        get_consume_top(1);
        /**
         * 第三方，每月点击数
         */
        echarts_total_clicks = echarts.init(document.getElementById('echarts-total-clicks'), 'walden');
        option_total_clicks = {
       		 	color: ['#3398DB'],
       		    tooltip: {
       		        trigger: 'axis',
       		        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
       		            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
       		        }
       		    },
       		    grid: {
       		        left: '3%',
       		        right: '4%',
       		        bottom: '3%',
       		        containLabel: true
       		    },
       		    xAxis: [
       		        {
       		            type: 'category',
       		            data: [],
       		            axisTick: {
       		                alignWithLabel: true
       		            }
   						
       		        }
       		    ],
       		    yAxis: [
       		        {
       		            type: 'value'
       		        }
       		    ],
       		    series: [
       		        {
       		            type: 'bar',
       		            barWidth: '60%',
       		            data: []
       		        }
       		    ]
        };

        echarts_total_clicks.setOption(option_total_clicks);
        get_clicks(0);
        /**
         * 中国地图
         */
        var echartsMap = echarts.init(document.getElementById('echarts-map'), 'walden');


        var optionMap = {
            legend: {},
            tooltip: {
                trigger: 'axis',
                showContent: false
            },
            dataset: {
                source: [
                    ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
                    ['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
                    ['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
                    ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
                    ['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1]
                ]
            },
            xAxis: {type: 'category'},
            yAxis: {gridIndex: 0},
            grid: {top: '55%'},
            series: [
                {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                {
                    type: 'pie',
                    id: 'pie',
                    radius: '30%',
                    center: ['50%', '25%'],
                    label: {
                        formatter: '{b}: {@2012} ({d}%)'
                    },
                    encode: {
                        itemName: 'product',
                        value: '2012',
                        tooltip: '2012'
                    }
                }
            ]
        };

        //echartsMap.setOption(optionMap);


        // echarts 窗口缩放自适应
        window.onresize = function () {
            echartsRecords.resize();
        }

    });
    
    //消耗排行榜数据
    function get_consume_top(type,times=0){
    	echarts_consume_top.showLoading();
    	$.post('{:url("consume_top")}?t=json',{type:type,times:times},function(data){
    		echarts_consume_top.hideLoading();
    		echarts_consume_top.setOption({
    			title: {
                    text: data.data.text
                },
    			 xAxis: [
	                {
	                    type: 'category',
	                    boundaryGap: false,
	                    data: data.data.x,
	                 	boundaryGap: true
		        	}
		        ],
		        series: [{
		        	name: '运营同学',
		            data: data.data.y
		        }]
		    });
    	});
	}
    //第三方。每月点击数据
    function get_clicks(times=0){
    	echarts_total_clicks.showLoading();
    	$.post('{:url("get_total_clicks")}?t=json',{times:times},function(data){
    		echarts_total_clicks.hideLoading();
    		echarts_total_clicks.setOption({
    			title: {
                    text: data.data.text
                },
    			 xAxis: [
	                {
	                    type: 'category',
	                    boundaryGap: false,
	                    data: data.data.x,
	                 	boundaryGap: true
		        	}
		        ],
		        series: [{
		        	name: '总点击数',
		            data: data.data.y
		        }]
		    });
    	});
	}
</script>
</body>
</html>
